<template>
	<view class="page" :class="getThemeClass">
		<unavbar title="积分账户">
			<template #barRight>
				<view @click="openWin('../airdrop-bill/airdrop-bill')">积分记录</view>
			</template>
		</unavbar>
		
		<view class="my-wallet-card-box">
			<view class="my-wallet-card">
				<image src="/static/images/wallet/qyzh_bg_1.png" class="wallet-card-bg" mode=""></image>
				<view class="wallet-card-content">
					<!-- 可用积分 -->
					<view class="wallet-card-content-title u-font-26">账户可用积分</view>
					<view class="flex justify-between flex-wrap u-p-l-28 u-p-r-28">
						<view class="wallet-card-content-value u-m-t-20" style="font-size: 36rpx;">{{wallet.air_drop}}</view>
						<view class="wallet-card-content-value u-m-t-20" style="background-color: #c9ff5d; color: black; border-radius: 30rpx; padding: 5rpx 30rpx;">充值</view>
					</view>
					<view class="u-flex align-center u-m-t-20">
						<view class="u-m-r-30">
							<text class="wallet-card-content-title u-font-26 u-m-l-5">冻结积分</text>
							<text class="wallet-card-content-value u-font-28 u-m-l-10">{{wallet.drop_dec}}</text>
						</view>
					</view>
				</view>
				<view class="wallet-card-bottom">
					<view class="wallet-card-bottom-item">
						<view class="wallet-card-content-title u-font-26">{{wallet.drop_dec}}</view>
						<view class="wallet-card-content-value u-font-26 u-m-t-10">永久可用积分</view>
					</view>
					<view class="wallet-card-bottom-item" >
						<text class="wallet-card-content-title u-font-26">{{wallet.drop_dec}}</text>
						<text class="wallet-card-content-value u-font-26 u-m-t-10">体验卡积分</text>
					</view>
					<view class="wallet-card-bottom-item" >
						<text class="wallet-card-content-title u-font-26">{{wallet.drop_dec}}</text>
						<text class="wallet-card-content-value u-font-26 u-m-t-10">权益卡积分</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="flex justify-between flex-wrap align-center u-m-30">
			<view class=" text-tips text-bold" >权益卡专享</view>
			<view class=" text-tips u-font-24">一键领取</view>
		</view>
		<view class="u-p-l-28 u-p-r-28">
			<view class="card-item flex justify-between flex-wrap align-center" v-for="(item,index) in cardList" :key="index" @click="openWin(`/pages/my/airdrop-award/card?id=${index}`)">
				<view class="flex justify-between flex-wrap align-center">
					<image :src="item.pic" mode="aspectFill" style="width: 64rpx; height: 64rpx;"></image>
					<view class="u-m-l-20">
						<view class="u-font-28">{{item.title}}</view>
						<view class="u-font-26 text-tips">{{item.desc}}</view>
					</view>
					
				</view>
				
				<view class="u-font-22 text-tips card-item-btn">{{item.text}}</view>
			</view>
		</view>
		
		<view class="flex justify-between flex-wrap align-center u-m-30 u-m-t-60">
			<view class=" text-tips text-bold" >新手任务</view>
			<view class=" text-tips u-font-24">一键领取</view>
		</view>
		<view class="u-p-l-28 u-p-r-28">
			<view class="card-item flex justify-between flex-wrap align-center" v-for="(item,index) in newList" :key="index" @click="openWin(`/pages/my/point/point-detail?id=${item.id}`)">
				<view class="flex justify-between flex-wrap align-center">
					<image :src="item.pic" mode="aspectFill" style="width: 64rpx; height: 64rpx;"></image>
					<view class="u-m-l-20">
						<view class="u-font-28">{{item.title}}</view>
						<view class="u-font-26 text-tips">{{item.desc}}</view>
					</view>
					
				</view>
				
				<view class="u-font-22 text-tips card-item-btn">{{item.text}}</view>
			</view>
		</view>
		
		<view class="flex justify-between flex-wrap align-center u-m-30 u-m-t-60">
			<view class=" text-tips text-bold" >积分任务</view>
			<view class=" text-tips u-font-24">一键领取</view>
		</view>
		<view class="u-p-l-28 u-p-r-28">
			<view class="card-item flex justify-between flex-wrap align-center" v-for="(item,index) in walletList" :key="index" @click="openWin(`/pages/my/point/point-detail?id=${item.id}`)">
				<view class="flex justify-between flex-wrap align-center">
					<image :src="item.pic" mode="aspectFill" style="width: 64rpx; height: 64rpx;"></image>
					<view class="u-m-l-20">
						<view class="u-font-28">{{item.title}}</view>
						<view class="u-font-26 text-tips">{{item.desc}}</view>
					</view>					
				</view>
				<view class="u-font-22 text-tips card-item-btn">{{item.text}}</view>
			</view>
		</view>

		<!-- 邀请记录 -->
		<!-- <view class="title">积分商城</view>
		<view class="flex justify-between flex-wrap u-p-l-28 u-p-r-28">
			<view class="air-card card-bg u-m-b-24" v-for="(item,index) in list" :key="index" @click="openWin(`/pages/my/point/point-detail?id=${item.id}`)">
				<image :src="item.cover" mode="aspectFill" class="air-img"></image>
				<view class="line-1 u-font-30 text-bold u-m-t-32">{{item.title}}</view>
				<view class="u-font-22 u-m-t-20 text-tips">库存：{{item.sur_issue}}</view>
				<view class="line u-m-t-20 air-line"></view>
				<view class="flex justify-between align-center u-m-t-10">
					<view class="u-font-24 text-tips">价格：</view>
					<view class="u-font-32 text-bold">{{item.price}}</view>
				</view>
			</view>
			
		</view> -->
		<!-- <view class="record_card card-bg" v-for="(item,index) in itemData" :key="index">
			<view class="card_left">
				<view class="avatar">
					<image :src="item.avatar" mode="widthFix"></image>
				</view>
				<view class="card_flex">
					<view class="card_name">{{item.nickname}}</view>
					<view class="coding text-content">{{item.phone}}</view>
				</view>
			</view>
			<view class="card_right">
				<view class="time text-tips">{{item.created_at}}</view>
			</view>
		</view> -->
		<uni-load-more :status="loadStatus"></uni-load-more>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemData: [],
				wallet: {},
				loadStatus:'noMore',
				page: 1,
				limit: 10,
				list:[],
				cardList:[
					{
						id: 1,
						title: 'AI魔法体验卡',
						desc: '注册即送，每天赠送30积分',
						text: '去创作',
						src: '',
						pic: '/static/images/wallet/card0.png'
					},
					{
						id: 2,
						title: '白银权益卡',
						desc: '注册即送，每天赠送30积分',
						text: '去开通',
						src: '',
						pic: '/static/images/wallet/card1.png'
					},
					{
						id: 3,
						title: '黄金权益卡',
						desc: '注册即送，每天赠送30积分',
						text: '去开通',
						src: '',
						pic: '/static/images/wallet/card2.png'
					},
					{
						id: 4,
						title: '铂金权益卡',
						desc: '注册即送，每天赠送30积分',
						text: '去开通',
						src: '',
						pic: '/static/images/wallet/card3.png'
					},
				],
				newList:[
					{
						title: '注册',
						desc: '完成注册，立即获得50积分',
						text: '已完成',
						src: '',
						pic: '/static/images/wallet/new1.png'
					},
					{
						title: '下载APP',
						desc: '下载并使用APP登录，获得50积分',
						text: '去完成',
						src: '',
						pic: '/static/images/wallet/new2.png'
					},
					{
						title: '黄金权益卡',
						desc: '完成实名认证，立即获得100积分',
						text: '去完成',
						src: '',
						pic: '/static/images/wallet/new3.png'
					},
					{
						title: '首次实物定制',
						desc: '首次定制数字藏品，可获得20积分',
						text: '去完成',
						src: '',
						pic: '/static/images/wallet/new4.png'
					},
				],				
				walletList:[
					{
						title: '实物定制',
						desc: '购实定制商品，获得交易额*5%积分',
						text: '去完成',
						src: '',
						pic: '/static/images/wallet/new4.png'
					},
					{
						title: '邀请好友注册',
						desc: '邀请好友完成注册，立即获得20积分',
						text: '去完成',
						src: '',
						pic: '/static/images/wallet/new7.png'
					},
					{
						title: '邀请好友实名',
						desc: '邀请好友完成实名认证，获得30积分',
						text: '去完成',
						src: '',
						pic: '/static/images/wallet/new8.png'
					},
				]
			};
		},
		onShow() {
			this.getAirdrop()
			this.getList(true)
		},
		onReachBottom() {
			if(this.loadStatus=='noMore')return
			this.page++
			this.getList()
		},
		methods: {
			getAirdrop() {
				this.$u.api.air_drop().then(res => {
					if (res.code == 200) {
						this.wallet = res.data.wallet
					}
				})
			},
			getList(flag){
				if(flag)this.page=1
				this.$u.api.point_index({
						page: this.page,
						limit: this.limit
					}).then(res => {
					if (res.code == 200) {
						this.list = flag? res.data.list.data:this.list.concat(res.data.list.data);
						this.loadStatus = res.data.list.next_page_url?'more':'noMore'
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.air-card{
		width: 335rpx;
		height: 526rpx;
		border-radius: 20rpx;
		padding: 24rpx 24rpx 0 24rpx;
		.air-img{
			width: 287rpx;
			height: 287rpx;
			border-radius: 20rpx;
		}
		.air-line{
			height: 1rpx;
		}
	}
	.card-item {
		background-color: #262626;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
		margin-bottom: 30rpx;
		.card-item-btn{
			// border: solid 1px #9B9B9B;
			background-color: #cbfe5d;
			color: #000000;
			border-radius: 20rpx;
			padding: 6rpx 20rpx;
		}
		.card-item-btn-1{
			// border: solid 1px #9B9B9B;
			background-color: #cbfe5d;
			color: #000000;
			border-radius: 20rpx;
			padding: 6rpx 20rpx;
		}
		.card-item-btn-2{
			// border: solid 1px #9B9B9B;
			background-color: #cbfe5d;
			color: #000000;
			border-radius: 20rpx;
			padding: 6rpx 20rpx;
		}
	}
	// .box {
	// 	height: 100%;
	// 	background-color: #F9F9F9;
	// }

	// page {
	// 	background-color: #F9F9F9;
	// }

	// .page-black {
	// 	background-color: #1E2020;
	// 	min-height: 100vh;

	// 	.title {
	// 		color: #FFFFFF;
	// 	}

	// 	.record_card {
	// 		background-color: #292B2B;

	// 		.card_name {
	// 			color: #FFFFFF;
	// 		}

	// 		.grey {
	// 			color: #F7924C !important;
	// 		}
	// 	}
	// }

	.title {
		margin: 40rpx 34rpx 30rpx;
		font-size: 30rpx;
		// color: #333333;
		font-weight: bold;
	}

	.record_card {
		display: flex;
		justify-content: space-between;
		// background-color: #fff;
		height: 140rpx;
		margin: 20rpx 30rpx;
		align-items: center;
		border-radius: 10rpx;
		padding-right: 24rpx;

		.card_left {
			display: flex;
			align-items: center;

			.avatar {
				border-radius: 50%;
				width: 80rpx;
				height: 80rpx;
				margin: 0 24rpx 0 28rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
			}

			.card_flex {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.card_name {
					font-size: 28rpx;
					font-weight: bold;
					width: 260rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}


				.coding {
					// color: #999999;
					font-size: 24rpx;
					margin-top: 14rpx;
					width: 260rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		.card_right {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			justify-content: space-between;

			.grey {
				// color: #764E39;
				font-weight: 800;
			}

			.time {
				margin-top: 14rpx;
				// color: #999999;
				font-size: 24rpx;
			}

		}
	}
	
	.recharge_btn {
		width: 126rpx;
		height: 54rpx;
		line-height: 54rpx;
		border-radius: 28rpx;
		text-align: center;
		border: 1px solid white;
	}
</style>
